import React, { Component } from 'react';
import { Checkbox, Alert, Icon, Card, Divider,message} from 'antd';
const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import Link from 'umi/link';
import { SlideVerify } from "antd-pro-toolkit";
import loginImg from '../../assets/loginTitle.png';
import styles from './Login.less';
import Login from '@/components/Login';

const HeartSvg = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="26.001" height="26" viewBox="0 0 26.001 26">

    <g transform="translate(-72.209 -75.924)">
      <path fill="#999999" d="M-10037.187-2771.435a12.959,12.959,0,0,1-4.133-2.786,12.989,12.989,0,0,1-2.787-4.132,12.954,12.954,0,0,1-1.021-5.061,12.952,12.952,0,0,1,1.021-5.059,12.986,12.986,0,0,1,2.787-4.132,12.959,12.959,0,0,1,4.133-2.786,12.925,12.925,0,0,1,5.061-1.022,12.929,12.929,0,0,1,5.059,1.022,12.965,12.965,0,0,1,4.132,2.786,12.951,12.951,0,0,1,2.786,4.132,12.918,12.918,0,0,1,1.022,5.059,12.92,12.92,0,0,1-1.022,5.061,12.954,12.954,0,0,1-2.786,4.132,12.965,12.965,0,0,1-4.132,2.786,12.929,12.929,0,0,1-5.059,1.022A12.925,12.925,0,0,1-10037.187-2771.435Zm-6.73-11.979a11.8,11.8,0,0,0,11.791,11.791,11.8,11.8,0,0,0,11.789-11.791,11.8,11.8,0,0,0-11.789-11.789A11.8,11.8,0,0,0-10043.918-2783.414Zm11.911,3.24a7.451,7.451,0,0,0-6.88,4.566l-1.115-.47a8.674,8.674,0,0,1,3.141-3.821,8.655,8.655,0,0,1,2.116-1.043,5.661,5.661,0,0,1-2.921-4.952,5.665,5.665,0,0,1,5.658-5.66,5.666,5.666,0,0,1,5.66,5.66,5.665,5.665,0,0,1-2.922,4.952,8.657,8.657,0,0,1,2.115,1.043,8.685,8.685,0,0,1,3.143,3.821l-1.115.47A7.452,7.452,0,0,0-10032.007-2780.174Zm-4.45-5.72a4.453,4.453,0,0,0,4.449,4.449,4.455,4.455,0,0,0,4.45-4.449,4.455,4.455,0,0,0-4.45-4.45A4.454,4.454,0,0,0-10036.457-2785.894Z" transform="translate(10117.338 2872.337)" />
    </g>
  </svg>
);
const HeartSvg1 = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="26.001" height="26" viewBox="0 0 26.001 26">

    <g transform="translate(-72.209 -75.924)">
      <path fill="#000" d="M-10037.187-2771.435a12.959,12.959,0,0,1-4.133-2.786,12.989,12.989,0,0,1-2.787-4.132,12.954,12.954,0,0,1-1.021-5.061,12.952,12.952,0,0,1,1.021-5.059,12.986,12.986,0,0,1,2.787-4.132,12.959,12.959,0,0,1,4.133-2.786,12.925,12.925,0,0,1,5.061-1.022,12.929,12.929,0,0,1,5.059,1.022,12.965,12.965,0,0,1,4.132,2.786,12.951,12.951,0,0,1,2.786,4.132,12.918,12.918,0,0,1,1.022,5.059,12.92,12.92,0,0,1-1.022,5.061,12.954,12.954,0,0,1-2.786,4.132,12.965,12.965,0,0,1-4.132,2.786,12.929,12.929,0,0,1-5.059,1.022A12.925,12.925,0,0,1-10037.187-2771.435Zm-6.73-11.979a11.8,11.8,0,0,0,11.791,11.791,11.8,11.8,0,0,0,11.789-11.791,11.8,11.8,0,0,0-11.789-11.789A11.8,11.8,0,0,0-10043.918-2783.414Zm11.911,3.24a7.451,7.451,0,0,0-6.88,4.566l-1.115-.47a8.674,8.674,0,0,1,3.141-3.821,8.655,8.655,0,0,1,2.116-1.043,5.661,5.661,0,0,1-2.921-4.952,5.665,5.665,0,0,1,5.658-5.66,5.666,5.666,0,0,1,5.66,5.66,5.665,5.665,0,0,1-2.922,4.952,8.657,8.657,0,0,1,2.115,1.043,8.685,8.685,0,0,1,3.143,3.821l-1.115.47A7.452,7.452,0,0,0-10032.007-2780.174Zm-4.45-5.72a4.453,4.453,0,0,0,4.449,4.449,4.455,4.455,0,0,0,4.45-4.449,4.455,4.455,0,0,0-4.45-4.45A4.454,4.454,0,0,0-10036.457-2785.894Z" transform="translate(10117.338 2872.337)" />
    </g>
  </svg>
);
const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
const HeartIcon1 = props => <Icon component={HeartSvg1} {...props} />;
@connect(({ auth, loading }) => ({
  auth,
  submitting: loading.effects['auth/login']
}))
class LoginPage extends Component {
  state = {
    pdata: "",
    childrenMsg: "",
    getDataList: "",
    value: "1234",
    checkName:"",
    checkCName:"",
    isVerify: false,
    checked:false,
    autoFlag:false
  };
  getData = (e) => {
    console.log(e)
    console.log(e.target.value)
    if(e.target.value !="" && !this.state.autoFlag){
      this.setState({
        autoFlag:true
      })
      return
    }
    this.setState({
      checkName:"",
      checkCName:""
    })
    const { dispatch } = this.props;
    const reg = /^\d{11}$/;
    if (reg.test(e.target.value)) {
      dispatch({
        type: 'auth/SelectUserInfo',
        payload: {
          data: { "mobile": e.target.value }
        },
        callback: (res) => {
          console.log("res", res);// 请求完成后返回的结果
          if(res.code != 200){
            message.error(res.msg, 3);
            return false;
          }
          if (res) {

            this.setState({
              getDataList: res.data
            })
          }
        }
      });
    }
    else{
      this.setState({
        getDataList:""
      })
    }


  }
  
  onGetCaptcha = () =>
    new Promise((resolve, reject) => {
      this.loginForm.validateFields(['mobile'], {}, (err, values) => {
        if (err) {
          reject(err);
        } else {
          const { dispatch } = this.props;
          dispatch({
            type: 'auth/getCaptcha',
            payload: values.mobile,
          })
            .then(resolve)
            .catch(reject);
        }
      });
    });
  checkUsername(u,p) {
    console.log(u+""+p)
    this.setState({
      checkName:u,
      checkCName:p
    })
  }
  reset(){
    this.setState({
      checkName:"",
      checkCName:""
    })
  }
  onChange(e) {
    this.setState({
      checked:e.target.checked
    })
    console.log(`checked = ${e.target.checked}`);
  }
  handleSubmit = (err, values) => {
    let v = values
   
    let reg = /^\d{11}$/;
   
    console.log(reg)
    console.log(reg.test(v.userName))
    if (reg.test(v.userName)) {
      if(this.state.checkName==""){
        message.error("请选择账号后登录", 3);
        return
      }
    }
    v["platform"] = 5
    console.log("isVerify,",this.state.isVerify)
    if(!this.state.isVerify){
      message.error("请滑动验证", 3);
      return
    }
    if(!this.state.checked){
      message.error("请阅读并同意协议", 3);
      return
    }
    if(this.state.checkName){
      v["userName"] = this.state.checkName
    }
    if (!err) {
      const { dispatch, history } = this.props;
      console.log("props",this.props)
      dispatch({
        type: 'auth/login',
        payload: {
          data: v
        },
        callback: (res) => {
          console.log("res........",res);  
          if(res.code != 200){
            console.log("res123",res.msg)
            message.error(res.msg, 3);
            this.refs.slide.resetSlide();
            return false;
          }
          localStorage.setItem("authorizationCode", res.data.authorizationCode)
          localStorage.setItem("pid", res.data.pid)
          localStorage.setItem("uid", res.data.userId)
          history.push('/info/account')     // created by xiong
          
          
        }
      })
    }
  };
  onStop = isVerify => {
    if (isVerify) {
      this.setState({ isVerify });
    }
  }
  render() {
    const { auth, submitting } = this.props;
    let userList = this.state.getDataList
    return (
      <Card id="loginId" className={styles.loginId} style={{ width: 400, margin: '0 auto', padding: '0', background:"#000018" }} bordered={false}>
        <div>
          {/* <input type="text" name="" id="" style={{ width: 400, margin: '0 auto', padding: '0', background:"#000" }}/> */}
          <Login
            onSubmit={this.handleSubmit}
            ref={form => {
              this.loginForm = form;
              console.log(form)
            }}
          >
            <div>
              {/* <span style={{ fontSize: 34, fontWeight: 500, marginBottom: 50, display: 'inline-block', color: '#000000' }}>欢迎登录</span> */}
              <img src={loginImg} alt="" width="335" style={{marginBottom:35}}/>
              <UserName name="userName" placeholder="请输入账号" maxLength={30} onChange={this.getData} />
              {
                this.state.checkName?
                (
                  <div className={styles.userNameListCheck}  onClick={this.reset.bind(this)}>
                    <span className={styles.iconfix}><HeartIcon1 /></span>
                    <span className={styles.userName}>{this.state.checkName}</span> 
                    <span>{this.state.checkCName}</span>
                  </div>
                ):""
              }
              {
                this.state.getDataList && this.state.checkName==""  ?

                  (<div><span className={styles.checkCode}>
                    请选择要登录的账号
                  </span>
                    <div className={styles.userNameList}>
                      {
                        this.state.getDataList.map((item,index) => {
                          return <div className={styles.userNameListTag} key={item.username} onClick={this.checkUsername.bind(this,item.username,item.corporate)}>
                          <span className={styles.iconfix}><HeartIcon /><HeartIcon1 /></span><span className={styles.userName}>{item.username}</span> <span>{item.corporate}</span>
                        </div>
                        })
                      }
                      {/* <div className={styles.userNameListTag}>
                        <span className={styles.iconfix}><HeartIcon /><HeartIcon1 /></span><span className={styles.userName}>Cocoraty21294</span> <span>数据化登浩有限公司</span>
                      </div> */}
                    </div></div>) : ""
              }

              <Password
                name="password"
                placeholder="请输入密码"
                maxLength={18}
                onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
              />
            </div>
            
                <div className={styles.verifyWrap}>
                  <SlideVerify size='small' ref='slide' onStop={this.onStop} style={{ width: '100%' }} />
                </div>
            
            <Checkbox onChange={this.onChange.bind(this)} className={styles.checkCode}>已阅读并同意<a href="https://www.baidu.com/">《隐私政策》</a></Checkbox>
            <Submit loading={submitting} style={{ marginTop: 20 }} className={styles.loginSubmit}>
              <FormattedMessage id="app.login.login" />
            </Submit>
            <div className={styles.link}>

            </div>
            {/* <div className={styles.other}>
              <a href="" className={styles.link}>
                <FormattedMessage id="app.login.forgot-password" />
              </a>
              <Divider type="vertical" />
              <a className={styles.link} >
                <FormattedMessage id="app.login.signup" />
              </a>
            </div> */}
          </Login>
          <Link className={styles.login} to="/auth/Register">
              忘记密码
            </Link>
        </div>
      </Card>
    );
  }
}

export default LoginPage;
